<template>
  <div class="blog-admin-container">
    <el-card>
      <div class="blog-admin-container-title">页面管理</div>
      <el-row type="flex" style="flex-wrap: wrap" :gutter="20">
        <el-col v-for="page in pagesData" :key="page.id" :span="8">
          <el-card class="pages-item">
            <div class="pages-item-image">
              <div class="update-background">
                <el-tooltip class="item" effect="dark" content="修改" placement="top">
                  <i class="fas fa-ellipsis-h" @click="updateBackground(page)" /></el-tooltip>
              </div>
              <div class="image-mask" @click="viewPicture(page.background_image_url)" />
              <div class="page-label" @click="viewPicture(page.background_image_url)">{{ page.page_label }}</div>
              <el-image
                :src="page.background_image_url"
                fit="contain"
                :preview-src-list="[page.background_image_url]"
              />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
    s

    <el-dialog
      class="image-dialog"
      :visible.sync="dialogPicture.dialogVisible"
      fullscreen
    >
      <el-image
        class="dialog-el-image"
        :src="dialogPicture.viewPictureUrl"
        fit="cover"
        @click="handleImageClose"
      />
    </el-dialog>

    <el-dialog
      title="修改背景"
      :visible.sync="dialogPageData.dialogVisible"
      width="30%"
      @close="handleImageUpdateClose"
    >
      <el-switch
        v-model="backgroundImageUrlFile"
        style="margin-bottom: 10px"
        active-text="文件"
        inactive-text="url"
      />
      <el-upload
        v-if="backgroundImageUrlFile"
        drag
        multiple
        action="null"
        :http-request="imageUpload"
      >
        <el-image
          style="width: 100%; height: 100%"
          :src="dialogPageData.background_image_url"
          fit="cover"
        />
      </el-upload>
      <el-input v-else v-model="dialogPageData.background_image_url" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleImageUpdateClose">取 消</el-button>
        <el-button type="primary" @click="confirmUpload">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getPages, updatePages } from '@/api/pages'
import { uploadOSS, uploadToken } from '@/api/user'
import { Message } from 'element-ui'

export default {
  name: 'Pages',
  data() {
    return {
      backgroundImageUrlFile: true,
      dialogPicture: {
        dialogVisible: false,
        viewPictureUrl: ''
      },
      dialogPageData: {
        dialogVisible: false,
        id: '',
        background_image_url: ''
      },
      pagesData: []
    }
  },
  created() {
    this.getCurrentData()
  },
  methods: {
    getCurrentData() {
      getPages().then(resp => {
        this.pagesData = resp.data
      })
    },
    viewPicture(url) {
      this.dialogPicture.viewPictureUrl = url
      this.dialogPicture.dialogVisible = true
    },
    handleImageClose() {
      this.dialogPicture.viewPictureUrl = ''
      this.dialogPicture.dialogVisible = false
    },
    updateBackground(page) {
      this.dialogPageData.background_image_url = page.background_image_url
      this.dialogPageData.id = page.id
      this.dialogPageData.dialogVisible = true
    },
    confirmUpload() {
      updatePages({ id: this.dialogPageData.id, background_image_url: this.dialogPageData.background_image_url })
        .then(resp => {
          Message({
            message: '修改成功!',
            type: 'success',
            duration: 5 * 1000
          })
          this.getCurrentData()
        })
      this.handleImageUpdateClose()
    },
    handleImageUpdateClose() {
      this.dialogPageData.background_image_url = ''
      this.dialogPageData.id = ''
      this.dialogPageData.dialogVisible = false
    },
    imageUpload(file) {
      const this_ = this
      uploadToken('image').then(resp => {
        uploadOSS(resp.data.token, file.file).then(resp => {
          Message({
            message: '上传成功!',
            type: 'success',
            duration: 5 * 1000
          })
          this_.dialogPageData.background_image_url = resp.config.url.split('?')[0]
        })
      })
    }

  }
}
</script>

<style scoped>

</style>

<style lang="less">

  .pages-item {
    overflow: hidden;
    margin-bottom: 25px;
    .pages-item-image {
      position: relative;
      overflow: hidden;
      height: 20rem;
      .update-background {
        position: absolute;
        opacity: 0;
        z-index: 99;
        right: 10px;
        top: 5px;
        color: #ffffff;
        transition: all 1s;

      }

      &:hover .update-background {
        opacity: 1;
      }

      .image-mask {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #000000;
        z-index: 1;
        opacity: 0.5;
        transition: all 1s;
      }

      .page-label {
        position: absolute;
        width: 100%;
        top: 50%;
        left: 50%;
        z-index: 100;
        font-weight: 700;
        font-size: 2.5rem;
        text-align: center;
        letter-spacing: 1rem;
        transform: translate(-50%, -50%);
        color: #ffffff;
        opacity: 0.4;
        transition: all 1s;
      }

      .page-label:before {
        content: '';
        position: absolute;
        top: -20px;
        left: 0;
        right: 0;
        height: 2px;
        background-color: #ffffff;
        transform: translate(130%);
        transition: all 1s;
      }

      .page-label:after {
        content: '';
        position: absolute;
        bottom: -20px;
        left: 0;
        right: 0;
        height: 2px;
        background-color: #ffffff;
        transform: translate(-130%);
        transition: all 1s;

      }

      &:hover .page-label {
        opacity: 1;
      }

      &:hover .page-label:before {;
        transform: translate(30%);
      }

      &:hover .page-label:after {
        transform: translate(-30%);
      }

      .el-image {
        transform: scale(1.3);
        transition: all 1s;
      }

      &:hover .image-mask {
        opacity: 0;
      }

      &:hover .el-image {
        transform: scale(1.6);
      }
    }

  }

  .image-dialog {
    .dialog-el-image {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
    }
  }

</style>
